<div fxLayoutAlign="center">
  <mat-card class="mat-elevation-z6">
    <h1 translate>GDPR_HEADING</h1>

    <p translate [translateParams]="{appname: applicationName}">GDPR_MESSAGE</p>

    <h3 translate>DATA_SUBJECT_TITLE</h3>

    <div class="data-subject-container">
      <div class="error" [hidden]="!error">{{ error }}</div>

      <form
        class="form-container"
        id="data-subject-form"
        [formGroup]="dataSubjectGroup"
        (ngSubmit)="save()"
        color="warn"
      >

        <mat-form-field appearance="outline" color="accent">
          <mat-label translate>LABEL_EMAIL</mat-label>
          <input id="email" formControlName="emailControl" (ngModelChange)="findSecurityQuestion()"
          type="text" matInput placeholder="Enter your email">
          <mat-error *ngIf="emailForm.invalid && emailForm.errors.required" translate>MANDATORY_EMAIL</mat-error>
          <mat-error *ngIf="emailForm.invalid && emailForm.errors.email" translate>INVALID_EMAIL</mat-error>
        </mat-form-field>

        <div class="form-container" *ngIf="securityQuestion" id="forgot-form">
          <mat-form-field appearance="outline" color="accent">
            <mat-label>{{ securityQuestion }}</mat-label>
            <input id="securityAnswer" formControlName="securityQuestionControl" type="password" matInput placeholder="">
            <mat-error *ngIf="securityQuestionForm" translate>MANDATORY_SECURITY_ANSWER</mat-error>
          </mat-form-field>
        </div>

        <button
          type="submit"
          id="deleteUserButton"
          [disabled]="emailForm.invalid || securityQuestionForm.invalid"
          mat-raised-button
          color="primary"
        >
          <i class="fas fa-exclamation-triangle fa-lg"></i> {{'DELETE_DATA_LABEL' | translate}}
        </button>

      </form>
    </div>
  </mat-card>
</div>

